/* 账号管理-基本资料 */
<template>
	<div class="personal-info">
		<div class="personal-edit">
			<div class="content">
				<el-form ref="form" :model="form"  :rules="rules" label-width="85px" label-position="left" class="flex" hide-required-asterisk>
					<div class="edit-left flex-item">
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="姓名：" class="flex-item" prop="name">
								<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="性别：" class="flex-item" prop="sex">
								<el-radio v-model="form.sex" :label="1">男</el-radio>
								<el-radio v-model="form.sex" :label="2">女</el-radio>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="证件号码：" class="flex-item diy-select-input" prop="idCardNumber">
								<el-input placeholder="请输入证件号码" v-model="form.idCardNumber">
									<el-select v-model="form.idCardType" slot="prepend" placeholder="请选择" class="ID-type">
										<el-option label="身份证" value="1"></el-option>
										<el-option label="台胞证" value="2"></el-option>
									</el-select>
								</el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="工作经验：" class="flex-item" prop="workExperience">
								<el-select v-model="form.workExperience" placeholder="请选择工作经验" class="select-input">
									<el-option 
										v-for="(items,index) in workSelect" 
										:label="items.name" 
										:value="items.code" 
										:key="index">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="最高学历：" class="flex-item" prop="highestEducation">
								<el-select v-model="form.highestEducation" placeholder="请选择最高学历" class="select-input">
									<el-option 
										v-for="(items,index) in educationSelect" 
										:key="index" 
										:label="items.name" 
										:value="items.id">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian "></div>
							<el-form-item label="手机号码：" class="flex-item">
								<el-input v-model="form.phone"  placeholder="请输入手机号" maxlength="11"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="就业状况：" class="flex-item" prop="workStatus">
								<el-radio v-model="form.workStatus" :label="2">未就业</el-radio>
								<el-radio v-model="form.workStatus" :label="1">已就业</el-radio>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="籍贯：" class="flex-item">
								<el-input v-model="form.nativePlace" placeholder="请输入籍贯"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="QQ号：" class="flex-item">
								<el-input v-model="form.qq" placeholder="请输入QQ号" @keyup="handleInput"></el-input>
							</el-form-item>
						</div>
					</div>
					<div class="edit-right flex-item">
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="头像：" class="flex-item">
								<el-upload
									action="#"
									class="avatar-uploader"
									:show-file-list="false"
									:http-request="uploadFaceFiles">
									<div class="face-img"><img :src="form.headImg || 'https://xmjob.oss-cn-hangzhou.aliyuncs.com/life/20201022/20201022111406.png'"></div></el-upload>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="出生年月：" class="flex-item" prop="year">
								<el-date-picker
								v-model="form.year"
								type="date"
								placeholder="请选择出生年月" class="date-input">
								</el-date-picker>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="现居住地：" class="flex-item">
								<el-input v-model="form.currentAddress" placeholder="请输入现居住地"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="所学专业：" class="flex-item">
								<el-input v-model="form.major" placeholder="请输入所学专业"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian"></div>
							<el-form-item label="邮箱地址：" class="flex-item"  prop="email">
								<el-input v-model="form.email" placeholder="请输入邮箱地址"></el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="身高：" placeholder="请输入身高" class="flex-item diy-label-input">
								<el-input v-model="form.height">
									<template slot="append">CM</template>
								</el-input>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="婚姻状况：" class="flex-item">
								<el-radio v-model="form.maritalStatus" :label="0">未婚</el-radio>
  								<el-radio v-model="form.maritalStatus" :label="1">已婚</el-radio>
							</el-form-item>
						</div>
						<div class="edit-item flex">
							<div class="red-dian hide"></div>
							<el-form-item label="微信号：" class="flex-item">
								<el-input v-model="form.wxNumber" placeholder="请输入微信号"></el-input>
							</el-form-item>
						</div>
					</div>
				</el-form>
				<div class="form-option">
					<div class="save qida-success-btn" @click="updateAccountInfo">保存</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import {getAccountInfoById,updateAccountInfoById} from '@/api/me/account'
	import {filesAnon,findBaseData} from '@/api/base'
	export default {
		name:'personal-info',
		data(){
			var checkEmail = (rule, value, callback) => {
				const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
				if (!value) {
				return callback(new Error('邮箱不能为空'))
				}
				setTimeout(() => {
				if (mailReg.test(value)) {
					callback()
				} else {
					callback(new Error('请输入正确的邮箱格式'))
				}
				}, 100)
			}
			return {
				form:{
					"createTime": "",
					"currentAddress": "",
					"email": "",
					"headImg": "",
					"height": '',
					"highestEducation": '',
					"id": this.$store.getters.accountid,
					"idCardNumber": "",
					"idCardType": 1,
					"isHideName": 0,
					"major": "",
					"maritalStatus": 0,
					"name": "",
					"nativePlace": "",
					"phone": "",
					"qq": "",
					"sex": 1,
					"specialtyTags": "",
					"updateTime": "",
					"validFlag": 0,
					"workExperience": '',
					"workStatus": 1,
					"wxNumber": "",
					"year": ""
				},
				rules: {
					name: [{ required: true, trigger: "blur", message: "姓名不能为空" }],
					idCardNumber: [{ required: true, trigger: "blur", message: "证件号码不能为空" }],
					workExperience: [{ required: true, trigger: "blur", message: "请选择工作经验" }],
					highestEducation: [{ required: true, trigger: "blur", message: "请选择学历" }],
					workStatus: [{ required: true, trigger: "blur", message: "请选择就业状况" }],
					year: [{ required: true, trigger: "blur", message: "请选择出生年月" }],
					email:[{ required: true, trigger: "blur", validator: checkEmail}],
					sex: [{ required: true, trigger: "blur", message: "请选择性别" }],
				},
				workSelect:[],
				educationSelect:[
					{name : "初中", id : "32"},
					{name : "高中", id : "33"},
					{name : "中技", id : "34"},
					{name : "中专", id : "35"},
					{name : "大专", id : "36"},
					{name : "本科", id : "37"},
					{name : "硕士", id : "38"},
					{name : "博士", id : "39"},
					{name : "博后", id : "40"}
				]
			}
		},
		created() {
			this.getAccountInfo();
			this.getWorkExperience();
		},
		methods: {
			handleInput(e) {
				this.form.qq = e.target.value.replace(/\D/g, '').replace(/^0{1,}/g, '');
			},
			getAccountInfo(){
				let data = {'id' : this.$store.getters.accountid}
				getAccountInfoById(data).then(res => {
					if(res.datas){
						this.form = res.datas;
						this.from.workExperience = res.datas.workExperience;
						this.from.highestEducation = res.datas.highestEducation;
					}
				}).catch(err => {
					this.$message.error(err);
				})
			},
			updateAccountInfo(){
				this.$refs.form.validate(valid => {
					if (valid) {
						updateAccountInfoById(this.form).then(res => {
							this.$message.success('保存成功');
						}).catch(err => {
							this.$message.error(err);
						})
					}
				})
			},
			uploadFaceFiles(params){
				var vm = this;
				const file = params.file,
					fileType = file.type,
					fileName = file.name,
					isImage = fileType.indexOf("pdf") != -1,
					isLt2M = file.size / 1024 / 1024 < 2;
				// 根据后台需求数据格式
				const form = new FormData();
				// 文件对象
				form.append("file", file);
				// 项目封装的请求方法，下面做简单介绍
				filesAnon(form).then(res => {
					this.$set(vm.form,'headImg',res.url)
					vm.editResumeFace()
				}).catch(res => {
					//this.$message.error("上传失败，请重新上传");
				})
			},
			editResumeFace(){
				updateAccountInfoById(this.form).then(res => {
				}).catch(err => {
					this.$message.error(err);
				})
			},
			getWorkExperience(){
				let data={ data:'workExperience' }
				findBaseData(data).then(res => {
					this.workSelect=res.datas[0].children;
				}).catch(err => {
					this.$message.error(err);
				})
			},
		}
	}
</script>
<style lang="scss">
	.personal-info{
		width: 100%;
		position: relative;
		.personal-edit{
			.title{
				font-size: 16px;
				font-weight: bold;
				color: #3EABC4;
				border-left:4px solid #3EABC4;
				text-indent: 10px;
			}
			.content{
				margin-top: 25px;
				padding-bottom: 40px;
				.edit-left{
					padding-right: 80px;
					
				}
				.edit-right{
					padding-right: 40px;
					
				}
				.edit-item{
					.diy-select-input{
						.el-select{
							.el-input{
								width: 100px;
								border-right:0px;
							}
							.el-input__inner{
								border-right: 0px;
								padding-left: 5px;
								padding-right: 20px;
								text-align: center;
							}
						}
						.el-input__inner{
							border-left: 0px;
						}
						
						.el-input-group__prepend{
							border-radius: 0;
							background-color: #fff;
						}
						.el-input__icon{
							width: 15px;
						}
					}
					.diy-select-input.is-error{
						.el-input-group__append{
							border-color: #ff4949 !important;
						}
						.el-input-group__prepend{
							border-color: #ff4949 !important;
						}
						.el-input__inner:hover{
							border-color: #ff4949 !important;
						}
						.el-input__inner:focus{
							border-color: #ff4949 !important;
						}
						.el-input__inner{
							border-color: #ff4949 !important;
						}
					}
					.diy-eidt-input{
						.el-input__inner{
							border-right: 0px;
						}
						
						.el-input-group__append{
							border-radius: 0;
							background-color: #fff;
							color: #3EABC4;
							padding: 0 15px;
							cursor: pointer;
						}
					}
					.diy-label-input{
						.el-input__inner{
							border-right: 0px;
						}
						
						.el-input-group__append{
							border-radius: 0;
							background-color: #fff;
							color: #333;
							font-weight: 400;
							padding: 0 15px;
							cursor: pointer;
						}
					}
					.el-form-item{
						margin-bottom: 20px;
						.el-form-item__label{
							font-weight: normal;
							color: #777777;
						}
						.el-input__inner{
							border-radius: 0px;
						}
						.select-input{
							width: 100%;
						}
						.date-input{
							width: 100%;
						}
						.avatar-uploader{
							display: block;
							width: 92px;
							height: 92px;
						}
						
					}
					.red-dian{
						width: 5px;
						height: 5px;
						border-radius: 2.5px;
						background-color: #d92032;
						margin-right: 5px;
						margin-top: 16px;
					}
					.red-dian.hide{
						opacity: 0;
					}
					.face-img{ 
						width: 92px;
						height: 92px;
						border:1px solid #ccc;
						img{
							width: 86px;
							height: 86px;
							margin-left: auto;
							margin-right: auto;
							margin-top: 2px;
							display: block;
						}
					}
				}
				.form-option{
					margin-top: 10px;
					padding-left: 10px;
					.save{
						margin-right: 15px;
					}
					
				}
			}
		}
		
	}
</style>
